<script setup lang="ts">
import {
  requireImage,
  warFeatureClick,
  clearWarEditState,
  removeTempMapFactor,
  warLoadFeatureClick,
  removeLastMapFactorActive,
  removeActiveMapFactor,
} from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { OperationType } from './RightFeatureOperation.module'

const operationList = ref<Array<OperationType>>([
  {
    label: '保存',
    type: 'save',
    imgUrl: requireImage('feature/save.png'),
    state: false,
  },
  {
    label: '清空',
    type: 'clearAll',
    imgUrl: requireImage('feature/clearAll.png'),
    state: false,
  },
  {
    label: '复位',
    type: 'reset',
    imgUrl: requireImage('feature/reset.png'),
    state: false,
  },
  {
    label: '导出',
    type: 'export',
    imgUrl: requireImage('feature/export.png'),
    state: false,
  },
])

const featureList = ref<any>([
  {
    id: '111',
    name: '基础符号',
    type: 'BasicSymbol',
    state: true,
    class: 'w-100px h-70px',
    list: [
      {
        label: '圆',
        type: 'circle',
        bzlx: '0',
        imgUrl: requireImage('feature/circle.png'),
        state: false,
      },
      {
        label: '圆（线）',
        type: 'circleLine',
        bzlx: '1',
        imgUrl: requireImage('feature/circleLine.png'),
        state: false,
      },
      {
        label: '多边形(面)',
        type: 'polygon',
        bzlx: '2',
        imgUrl: requireImage('feature/polygon.png'),
        state: false,
      },
      {
        label: '多边形（线）',
        type: 'polygonLine',
        bzlx: '3',
        imgUrl: requireImage('feature/polygonLine.png'),
        state: false,
      },
      {
        label: '实线箭头',
        type: 'arrow',
        bzlx: '4',
        imgUrl: requireImage('feature/arrow.png'),
        state: false,
      },
      {
        label: '线',
        type: 'line',
        bzlx: '5',
        imgUrl: requireImage('feature/line.png'),
        state: false,
      },
      {
        label: '文字',
        type: 'text',
        bzlx: '6',
        imgUrl: requireImage('feature/text.png'),
        state: false,
      },
      {
        label: '',
        type: '',
        bzlx: '',
        imgUrl: '',
        state: false,
      },
    ],
  },
  {
    id: '222',
    name: '作战部署',
    type: 'firefightDeploy',
    state: true,
    class: 'w-120px h-70px',
    list: [
      {
        label: '指挥部',
        type: 'command',
        bzlx: '7',
        imgUrl: requireImage('feature/command.png'),
        state: false,
      },
      {
        label: '举高类消防车',
        text: '高喷',
        type: 'rearCar',
        bzlx: '8',
        selectInput: true,
        imgUrl: requireImage('feature/rearCar.png'),
        state: false,
      },
      {
        label: '灭火类消防车',
        text: '灭火',
        type: 'firefightCar',
        bzlx: '9',
        selectInput: true,
        imgUrl: requireImage('feature/firefightCar.png'),
        state: false,
      },
      {
        label: '抢险类消防车',
        text: '抢险',
        type: 'rescueCar',
        selectInput: true,
        bzlx: '10',
        imgUrl: requireImage('feature/rescueCar.png'),
        state: false,
      },
      {
        label: '专勤类消防车',
        text: '专勤',
        type: 'serviceCar',
        selectInput: true,
        bzlx: '11',
        imgUrl: requireImage('feature/serviceCar.png'),
        mapImgUrl: requireImage('feature/map/firefightCar.png'),
        state: false,
      },
      {
        label: '特种装备',
        text: '特种装备',
        type: 'specialDevice',
        bzlx: '12',
        imgUrl: requireImage('feature/specialDevice.png'),
        mapImgUrl: requireImage('feature/map/specialDevice.png'),
        state: false,
      },
      {
        label: '消防水枪',
        type: 'fireHoses',
        bzlx: '13',
        imgUrl: requireImage('feature/fireHoses.png'),
        state: false,
      },
      {
        label: '消防炮',
        type: 'fireMonitor',
        bzlx: '14',
        imgUrl: requireImage('feature/fireMonitor.png'),
        state: false,
      },
      {
        label: '泵组供水点',
        type: 'pumpPoint',
        bzlx: '15',
        imgUrl: requireImage('feature/pumpPoint.png'),
        state: false,
      },
      {
        label: '进攻路线',
        type: 'attackingRoute',
        bzlx: '16',
        imgUrl: requireImage('feature/attackingRoute.png'),
        state: false,
      },
      {
        label: '撤离路线',
        type: 'evacuationRoute',
        bzlx: '17',
        imgUrl: requireImage('feature/evacuationRoute.png'),
        state: false,
      },
      {
        label: '进攻方向',
        type: 'attackDirection',
        bzlx: '18',
        imgUrl: requireImage('feature/attackDirection.png'),
        state: false,
      },
    ],
  },
  {
    id: '333',
    name: '作战标记',
    type: 'firefightMarker',
    state: true,
    class: 'w-120px h-70px',
    list: [
      {
        label: '事故点',
        type: 'accidentPoint',
        bzlx: '19',
        imgUrl: requireImage('feature/accidentPoint.png'),
        state: false,
      },
      {
        label: '禁止通行',
        type: 'noThoroughfare',
        bzlx: '20',
        imgUrl: requireImage('feature/noThoroughfare.png'),
        state: false,
      },
      {
        label: '被困人员',
        type: 'trappedPerson',
        bzlx: '21',
        imgUrl: requireImage('feature/trappedPerson.png'),
        state: false,
      },
      {
        label: '事故区',
        type: 'emergencyArea',
        bzlx: '22',
        imgUrl: requireImage('feature/emergencyArea.png'),
        state: false,
      },
      {
        label: '集结区',
        type: 'stagingArea',
        bzlx: '23',
        imgUrl: requireImage('feature/stagingArea.png'),
        state: false,
      },
      {
        label: '待命区',
        type: 'waitingArea',
        bzlx: '24',
        imgUrl: requireImage('feature/waitingArea.png'),
        state: false,
      },
      {
        label: '禁停区',
        type: 'forbidArea',
        bzlx: '25',
        imgUrl: requireImage('feature/forbidArea.png'),
        state: false,
      },
      {
        label: '装备器材区',
        type: 'equipmentArea',
        bzlx: '26',
        imgUrl: requireImage('feature/equipmentArea.png'),
        state: false,
      },
      {
        label: '警戒区',
        type: 'alertingArea',
        bzlx: '27',
        imgUrl: requireImage('feature/alertingArea.png'),
        state: false,
      },
    ],
  },
])

const firefightPlotStore: any = useFirefightPlotStore()
const chemicalStore = useChemicalStore()

warLoadFeatureClick() //监听要素点击事件

const handleFoldClick = (data: any) => {
  data.state = !data.state
}

const handleFeatureOperation = (data: any) => {
  switch (data.type) {
    case 'save':
      // 保存操作 关闭作战标绘窗口 返回图层管理页面窗口，
      removeTempMapFactor(firefightPlotStore.currentCheckLayerList[0].id)
      removeTempMapFactor('temp')
      firefightPlotStore.isFirefightPlotFlag = false
      firefightPlotStore.isLayerControlFlag = true
      ElMessage.success('保存成功')
      break
    case 'clearAll':
      console.log('清空', firefightPlotStore.attribute)
      // 清空操作 弹出询问层，确定后删除模型上所有的标绘要素
      confirmMessageBox(data)
      break
    case 'reset':
      resetViewAngle()
      break
    case 'export':
      // 导出操作 弹出导出询问框，确定后，先保存入库，后生成png入库
      confirmMessageBox(data)
      break
    default:
      break
  }
}

const handleFeatureClick = (data: any) => {
  removeLastMapFactorActive()
  firefightPlotStore.attribute = {
    id: undefined,
    zj: '',
    name: '',
    radius: 5,
    rotate: 0,
    lng: 0,
    lat: 0,
    alt: 0,
    bzlx: undefined,
    wzxx: {},
    zxjd: undefined,
    zxwd: undefined,
    zxgd: undefined,
  }
  if (data.label == '') {
    return
  }
  removeTempMapFactor('temp') //移除临时上图元素
  // 清除featureList选中要素
  clearFeatureCheckState()
  data.state = !data.state // 设置当前要素的选中状态

  if (data.state) {
    clearWarEditState() //清除标绘状态
    warFeatureClick(data) //标绘要素

    // 设置 选中标绘属性 提示
    chemicalStore.tipsPageShow = true
    firefightPlotStore.currentCheckFeatureType = data // 当前选中要素数据
    firefightPlotStore.isLeftPropertyEditFlag = false // 关闭 左侧符号属性面板

    let type = ''

    //线和多边形是绘制多个点
    if (
      firefightPlotStore.bzlxWarPolyline.includes(data.bzlx) ||
      firefightPlotStore.bzlxWarPolygon.includes(data.bzlx)
    ) {
      type = 'scrollWall'
    }

    chemicalStore.currentFactorInfo = {
      name: data.label,
      type,
      id: '',
    }
  }
}

/** 返回到标绘图管理页面 */
const returnBackLayerManager = () => {
  ElMessageBox.confirm('是否返回标绘图管理页面', '确认信息', {
    distinguishCancelAndClose: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(() => {
    removeLastMapFactorActive()
    firefightPlotStore.isFirefightPlotFlag = false // 进入标绘状态
    firefightPlotStore.returnBackLayerControlFlag = true // 从作战标绘页面返回到 图层管理页面标记
    chemicalStore.tipsPageShow = false // 关闭提示
    firefightPlotStore.isLeftPropertyEditFlag = false // 关闭 左侧符号属性面板
    removeTempMapFactor(firefightPlotStore.currentCheckLayerList[0].id)
    if (firefightPlotStore.currentCheckFeatureType) {
      removeActiveMapFactor(firefightPlotStore.currentCheckFeatureType?.bzlx, 'temp')
    }
  })
}

/** 清空当前图层信息 */
const clearAll = () => {
  const param = {
    cjid: firefightPlotStore.currentCheckLayerList[0].id,
    qyid: chemicalStore.qyInfo.id,
  }
  deleteLayerAllMarker(param).then((res) => {
    ElMessage.success('清空成功')
    removeTempMapFactor(firefightPlotStore.currentCheckLayerList[0].id)
    removeTempMapFactor('temp')
    firefightPlotStore.isLeftPropertyEditFlag = false
  })
}

function confirmMessageBox(data: OperationType) {
  const content = data.type === 'clearAll' ? '是否确认清空' : '是否确认导出'
  const cancelPrompt = data.type === 'clearAll' ? '取消清空' : '取消导出'
  ElMessageBox.confirm(content, '确认信息', {
    distinguishCancelAndClose: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
    .then(() => {
      if (data.type === 'export') {
        firefightPlotStore.exportLayerFlag = true
      }
      if (data.type === 'clearAll') {
        clearAll()
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: cancelPrompt,
      })
    })
}

function clearFeatureCheckState() {
  featureList.value.forEach((typeFeature: any, typeIndex: number) => {
    typeFeature.list.forEach((feature: any, featureIndex: number) => {
      if (feature.state) {
        featureList.value[typeIndex].list[featureIndex].state = false
      }
    })
  })
}

function resetViewAngle() {
  // 复位操作 初始化模型视角（正俯视角）、位置（企业中心点）、方向（指北）、层级
  window.GCamera.flyTo({
    pos: {
      lng: chemicalStore.tileSetOptions.tx,
      lat: chemicalStore.tileSetOptions.ty,
      height: 1200,
    },
  })
}
</script>

<template>
  <div class="feature-container">
    <!-- 标题 -->
    <div class="feature-title">标绘面板</div>
    <img
      class="w-30px h-30px absolute top-9px right-11px cursor-pointer"
      :src="requireImage('feature/return.png')"
      @click="returnBackLayerManager"
    />
    <!-- 要素操作 -->
    <div class="feature-operation">
      <div
        v-for="operation in operationList"
        :key="operation.type"
        class="flex flex-col mr-40px cursor-pointer"
        @click="handleFeatureOperation(operation)"
      >
        <img :src="operation.imgUrl" class="w-30px h-30px" />
        <div class="operation-label">{{ operation.label }}</div>
      </div>
    </div>
    <!-- 要素list -->
    <div v-for="featureType in featureList" :key="featureType.id" class="feature-content">
      <!-- 折叠栏 -->
      <div class="feature-folding" @click="handleFoldClick(featureType)">
        <div>{{ featureType.name }}</div>
        <img
          v-if="featureType.state"
          :src="requireImage('feature/foldDown.png')"
          class="w-30px h-30px"
        />
        <img v-else :src="requireImage('feature/foldUp.png')" class="w-30px h-30px" />
      </div>
      <!-- 要素展示栏 -->
      <template v-if="featureType.state">
        <div style="display: flex; justify-content: space-between; flex-wrap: wrap">
          <div
            v-for="feature in featureType.list"
            :key="feature.type"
            class="feature-type"
            :class="feature.state ? 'feature-type-check' : ''"
            @click="handleFeatureClick(feature)"
          >
            <img v-show="feature.imgUrl" :src="feature.imgUrl" :class="featureType.class" />
            <div class="feature-label">{{ feature.label }}</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style lang="less" scoped>
.feature-container {
  @apply absolute top-112px right-10px;
  width: 460px;
  height: 905px;
  border: 1px solid #0d609c;
  // background: linear-gradient(0deg, rgba(0, 0, 0, 0.59) 0%, #00081d 100%);
  background: rgba(0, 0, 0, 0.7);
  font-family: Microsoft YaHei;
  z-index: 99;
  padding: 10px;
  overflow: scroll;
  user-select: none;
  box-sizing: border-box;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.feature-container::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.feature-title {
  @apply text-24px font-bold mt-6px ml-2px select-none;
  color: #fffefe;
}

.feature-operation {
  @apply flex flex-row items-center pl-20px mt-10px mb-10px select-none;
  width: 440px;
  height: 70px;
  background: rgba(1, 7, 17, 0.8);

  .operation-label {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2px;
    user-select: none;
  }
}

.feature-content {
  @apply flex flex-row flex-wrap mb-25px select-none;

  .feature-folding {
    @apply flex flex-row items-center justify-between select-none cursor-pointer;
    width: 440px;
    height: 42px;
    background: rgba(1, 7, 17, 0.8);
    border: 1px solid #999999;
    font-size: 17px;
    font-weight: 400;
    color: rgba(255, 254, 254, 0.5);
    padding: 0 10px;
  }

  .feature-type {
    @apply flex min-w-100px flex-col flex-wrap flex-shrink items-center justify-around mt-10px;
    @apply select-none cursor-pointer;
    border: 1px solid rgba(0, 0, 0, 0);
  }

  .feature-type-check {
    background: rgba(15, 181, 235, 0.2);
    border: 1px solid #00ffff;
  }

  .feature-label {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
